<template>
	<view>
		<view class='headBg'>
			<image :src='topBg'></image>
		</view>
		<view class='courhead'>
			<view class='courseImg'>
				<image :src='courseImg'></image>
			</view>
			<view class='courseRight'>
				<view class="title">{{title}}</view>
				<view class='justify_between'>
					<navigator url='' class='courProfiles'>
						<image src='../../static/icon_kechengjieshao2x.png'></image>课程介绍
					</navigator>
					<view class='zan'>
						<image src='../../static/icon_Collection2x.png'></image>
					</view>
				</view>
			</view>
		</view>
		<!--  -->
		<view class='courseData'>
			<view>
				<view class="fs_36">{{finish}}</view>
				<view class='fs_24 color_91'>已学完</view>
			</view>
			<view>
				<view class="fs_36">{{duration}}<text class='fs_20 color_91'>分</text></view>
				<view class='fs_24 color_91'>学习时长</view>
			</view>
		</view>

		<view class='mlr_30'>
			<view class='justify_between color_91 fs_26 ptb_30'>
				<view>共{{sum}}期</view>
				<view>
					<image src='../../static/icon_sort2x.png' class='sort'></image>
					<text>选集</text>
					<image src='../../static/icon_down2x.png' class='updown'></image>
				</view>
			</view>

			<!-- 课程列表 -->
			<view class='courseList' v-for="(course, index) in courseList" :key="">
				<navigator url='' class='courseTitle fs_30'>
					<text>视频</text>{{course.title}}
				</navigator>
				<view class='courseInfo'>
					{{course.data}}
					<view class='lookNum'>
						<image src='../../static/icon_look2x.png'></image>
						{{course.num}} <text>|</text> 已学{{course.proportion}}%
					</view>
				</view>
				<text v-if="course.tip" class='tips'>上次学习</text>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				topBg: '../../static/bg_12x.png',
				courseImg: '../../static/img_kecheng02.png',
				title: '高考数学冲刺',
				finish: 5,
				duration: 56,
				sum: 12,
				courseList: [
					{
						title: '怎样正确对待高考？',
						data: '2019-06-18',
						num: 3126,
						proportion: 56,
						tip: true
					},
					{
						title: '怎样正确对待高考？',
						data: '2019-06-18',
						num: 3126,
						proportion: 56,
					},
					{
						title: '怎样正确对待高考？',
						data: '2019-06-18',
						num: 3126,
						proportion: 56,
					}
				]
			}
		},
		methods: {

		}
	}
</script>

<style>
	.headBg image {
		width: 750rpx;
		height: 280rpx;
		display: block;
	}

	.courhead {
		margin-top: -130rpx;
		padding: 30rpx;
		display: flex;
	}

	.courseImg image {
		width: 220rpx;
		height: 162rpx;
		display: block;
	}

	.zan image {
		width: 30rpx;
		height: 28rpx;
	}

	.courseRight {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-top: 30rpx;
		padding-left: 30rpx;
		color: #fff;
	}
	.title{
		font-size: 36rpx;
		z-index: 1;
	}

	.courProfiles {
		background-color: #F4F4F4;
		color: #8D8D8D;
		font-size: 22rpx;
		padding: 5rpx 20rpx;
		border-radius: 20rpx;
	}

	.courProfiles image {
		width: 18rpx;
		height: 18rpx;
		margin-right: 10rpx;
	}

	.courseData {
		display: flex;
		background-color: #F4F4F4;
		margin: 0 30rpx;
		border-radius: 10rpx;
		padding: 20rpx 0;
	}

	.courseData>view {
		flex: 1;
		text-align: center;
	}

	.sort {
		width: 27rpx;
		height: 25rpx;
		margin-right: 30rpx;
	}

	.updown {
		width: 21rpx;
		height: 21rpx;
		margin-left: 20rpx;
	}

	.courseList {
		border-top: 1rpx solid #eee;
		padding: 20rpx 0;
		position: relative;
	}

	.courseTitle text {
		border: 1rpx solid #D9D9D9;
		font-size: 20rpx;
		color: #D9D9D9;
		padding: 0 10rpx;
		border-radius: 6rpx;
		margin-right: 10px;
	}

	.courseInfo {
		font-size: 22rpx;
		color: #A1A1A1;
		margin-top: 20rpx;
	}

	.lookNum {
		display: inline-block;
		margin-left: 30rpx;
	}

	.lookNum image {
		width: 25rpx;
		height: 18rpx;
	}

	.lookNum text {
		margin: 0 15rpx;
	}

	.tips {
		background-color: #4794FC;
		color: #fff;
		position: absolute;
		top: 0;
		right: 0;
		font-size: 20rpx;
		padding: 5rpx 10rpx;
		border-bottom-left-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
	}
</style>
